<template>
	<view class="e-p-20">
		<scroll-view scroll-x="true" class="scroll-view-box bg-white">
			<view class="delivery-tabs bg-white e-flex e-p-4">
				<view class="delivery-tabs__item e-flex-xy-center" v-for="item in list" :key="item.value" :class="[value === item.value&&'c-white bg-primary',$isEnglishVersion&&'delivery-tabs__item155']"  @tap="tabChange(item.value)">
					{{item.name}}
				</view>
			</view>
			
		</scroll-view>
		
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
	})
</script>
<script setup lang="ts">	
	const props = defineProps<{
		value: number,
		list: Array<{
			name:string,
			value:number
		}>
	}>()
	
	const emits = defineEmits(['update:value','change'])
	
	const tabChange = (val:number) => {
		emits('update:value',val)
		emits('change', val)
	}
	
	
	
	
	
	


</script>


<style lang="scss">
	.scroll-view-box {
		width: 100%;
		height: 70rpx;
		border-radius: 36rpx;
		color: #333;
		white-space: nowrap;
	}
	.delivery-tabs {
		width: 100%;
		height: 70rpx;
		border-radius: 36rpx;
		color: #333;
		&__item {
			flex: 1 0 25%;
			padding:0 20rpx;
			height: 100%;
			border-radius: 32rpx;
			font-size: 28rpx;
			white-space:nowrap !important;
		}
		&__item155 {
			flex: 0 0 155px !important;
		}
	}
</style>
